<template>
  <div class="pt20 more" >
    <div class="more_title">{{ $route.query.type === 'activity' ? '精彩活动' : '招募通知'}}</div>
    <div class="flex flex_v_center mb10" style="align-items: stretch" v-for="item in list" :key="item.id">
      <div class="item_date">
        <div class="item_date_d">{{moment(item.dateCreated).format('DD')}}</div>
        <div class="item_date_ym">{{moment(item.dateCreated).format('YYYY-MM')}}</div>
      </div>
      <div class="item_content">
        <a href="javascript:;" @click="toDetail(item.id)" class="item_content_title text_ellipsis">{{ item.title || item.name }}</a>
        <div class="item_content_content" v-html="item.content"></div>
        <a-button size="small" class="more_btn" @click="toDetail(item.id)">查看更多<a-icon type="right" /></a-button>
      </div>
    </div>
    <a-pagination v-model="current" @change="changePage" :total="total" show-less-items class="fr mt10 mb10" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import moment from 'moment'
import { findAllActivity, findAllCourse } from '@/api/config'
export default {
  name: 'more',
  components: { },
  data () {
    return {
      moment,
      list: [],
      total: 0,
      current: 1
    }
  },
  computed: {
    ...mapState({
    })
  },
  mounted () {
    if (this.$route.query.type === 'activity') {
      this.getActivity()
    } else {
      this.getCourse()
    }
  },
  watch: {
  },
  methods: {
    async getActivity () {
      let params = {
        status: 'PUBLISHED',
        pageSize: 10,
        pageNum: this.current
      }
      let res = await findAllActivity(params)
      if (res.code === 200) {
        this.list = res.data.items
        this.total = res.data.totalCount
      }
    },
    async getCourse () {
      let params = {
        // auditsStatus: this.auditsStatus === 'ALL' ? '' : this.auditsStatus,
        status: 'RECRUITING',
        operate: 'manage',
        pageSize: 10,
        pageNum: this.current
      }
      let res = await findAllCourse(params)
      if (res.code === 200) {
        this.list = res.data.items
        this.total = res.data.totalCount
      }
    },
    changePage (e) {
      console.info(e)
      this.current = e
      if (this.$route.query.type === 'activity') {
        this.getActivity()
      } else {
        this.getCourse()
      }
    },
    toDetail (id) {
      this.$router.push(`/front/detail?type=${this.$route.query.type}&id=${id}`)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../../styles/var.styl'
.more
  width 1200px
  margin 0 auto
  padding-bottom: 60px;
.more_title
  font-size 16px
  border-bottom 2px solid #1677cb
  margin-bottom 15px
  font-weight bold
  padding-bottom: 5px;
.more_item
  margin-top 15px
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
.more_item_title
  font-size 16px
  cursor pointer
  font-weight bold
  margin-bottom 10px
  &:hover
    color #1677cb
.text_ellipsis2
  // height 52px
  overflow hidden
  white-space normal
  text-overflow ellipsis
  display -webkit-box
  -webkit-line-clamp 2
  -webkit-box-orient vertical
.item_date
  height 134px
  padding 0 15px
  width 150px
  text-align center
  background: #0b6cb8;
  color #fff
  display flex
  justify-content center
  align-items center
  flex-direction column
  // flex 1
  .item_date_d
    font-weight bold
    margin-bottom 8px
    font-size: 38px;
.item_content
  padding: 10px 15px;
  width: calc(100% - 150px);
  border 1px solid #eee
  flex 1
  .item_content_title
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
  .item_content_content
    height 42px
    overflow hidden
    white-space normal
    text-overflow ellipsis
    display -webkit-box
    -webkit-line-clamp 2
    -webkit-box-orient vertical
    margin-bottom: 8px;
  .more_btn
    border 1px solid #0b6cb8
    color #0b6cb8
    float: right;
</style>
